<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>彩色建筑图</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="elasticsearch,echarts,geojson,shapefile,language"
    src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    #mapid {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="mapid">
  </div>
  <div id="mouse-position">
  </div>
  <script>
    var mousePosition = document.getElementById('mouse-position')
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
      'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var myChart = echarts.init(document.getElementById('mapid'), null, {
      devicePixelRatio: 1
    });
    myChart.showLoading();
    $.getJSON('../../static/data/echartsgl/buildings/data.json', function (buildingsGeoJSON) {

      echarts.registerMap('buildings', buildingsGeoJSON);

      myChart.hideLoading();

      var regionsData = buildingsGeoJSON.features.map(function (feature) {
        return {
          name: feature.properties.name,
          value: Math.random(),
          height: +feature.properties.height * 10
        };
      });

      myChart.setOption({
        visualMap: {
          show: false,
          min: 0.4,
          max: 1,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
              '#f46d43', '#d73027', '#a50026'
            ]
          }
        },
        mapbox: {
          center: [13.409779, 52.520645],
          zoom: 13,
          pitch: 50,
          bearing: -10,
          style: 'mapbox://styles/mapbox/dark-v9',
          postEffect: {
            enable: true,
            SSAO: {
              enable: true,
              intensity: 1.3,
              radius: 5
            },
            screenSpaceReflection: {
              enable: false
            },
            depthOfField: {
              enable: true,
              blurRadius: 4,
              focalDistance: 90
            }
          },
          light: {
            main: {
              intensity: 3,
              alpha: -40,
              shadow: true,
              shadowQuality: 'high'
            },
            ambient: {
              intensity: 0.
            },
            ambientCubemap: {
              texture: '../../static/data/echartsgl/buildings/data.hdr',
              exposure: 1,
              diffuseIntensity: 0.5,
              specularIntensity: 1
            }
          }
        },
        series: [{
          type: 'map3D',
          coordinateSystem: 'mapbox',
          map: 'buildings',
          data: regionsData,
          shading: 'realistic',
          instancing: true,
          silent: true,
          itemStyle: {
            areaColor: '#fff'
          },
          realisticMaterial: {
            metalness: 0,
            roughness: 0.0
          }
        }]
      });
      var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
      mapbox.addControl(new MapboxLanguage(), 'top-right'); //中文支持
      //注册鼠标移动事件
      mapbox.on('mousemove', function (e) {
        //经纬度坐标转web墨卡托
        const earthRad = 6378137.0;
        const x = e.lngLat.lng * Math.PI / 180 * earthRad;
        const a = e.lngLat.lat * Math.PI / 180;
        const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        mousePosition.innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
      });

    });
    window.addEventListener('keydown', function () {
      myChart.dispatchAction({
        type: 'lines3DToggleEffect',
        seriesIndex: 0
      });
    });
  </script>
</body>

</html>